<template>
  <div>
    <br />
    <div>
      <Input
        v-model="username"
        placeholder="Enter something..."
        style="width: 300px"
      />
      <Button type="success">搜索</Button>
      <br />
      <br />
      <Table :columns="columns" :data="tableDate">
        <template slot-scope="{ row, index }" slot="action">
          <Button
          v-show="false"
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(index, row)"
            >修改</Button
          >
          <Button type="error" size="small" @click="remove(index)">删除</Button>
        </template>
      </Table>
    </div>
    <Modal v-model="modal" title="修改信息" @on-ok="ok" @on-cancel="cancel">
      <Form ref="formInline" :model="formInline" class="login_box">
        <FormItem prop="user">
          <Input
            type="text"
            v-model="formInline.username"
            placeholder="Username"
            clearable
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="nickname">
          <Input
            type="text"
            v-model="formInline.nickname"
            placeholder="text"
            clearable
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="email">
          <Input
            type="email"
            v-model="formInline.email"
            placeholder="email"
            clearable
          >
            <Icon type="md-cloud-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
      </Form>
    </Modal>
    <br>
    <Page :total="total" show-elevator show-total  style="text-align:center"/>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      total: 0,
      formInline: {
        username: '',
        nickname: '',
        email: ''
      },
      modal: false,
      tableDate: [],
      username: '',
      columns: [
        {
          title: '姓名',
          key: 'username'
        },
        {
          title: '别名',
          key: 'nickname'
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ]
    }
  },
  mounted() {
    this.getTableDate()
  },
  methods: {
    show(index, row) {
      console.log(index, row)
      this.modal = true
      this.formInline = row
    },
    getTableDate() {
      axios.get('/liz/userinfo').then((res) => {
        console.log(res)
        this.tableDate = res.data.data
        this.total = this.tableDate.length
      })
    },
    ok() {
      console.log(111)
      const params = new URLSearchParams()
      params.append('username', this.formInline.username)
      params.append('nickname', this.formInline.nickname)
      params.append('email', this.formInline.email)
      params.append('id', this.formInline.id)
      axios.post('/liz/updateUser', params).then((res) => {
        if (res.data.status === 200) {
          this.$Message.success('修改成功')
          this.getTableDate()
        } else {
          this.$Message.error(res.data.message)
          this.getTableDate()
        }
      })
    },
    cancel() {
      console.log(55)
    }
  }
}
</script>

<style>
</style>
